<template>
  <!-- 订单详情页面 -->
  <el-dialog :visible.sync="visible" title="订单详情" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" :inline="true" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
      <el-form-item prop="orderStatus" label="订单状态">
        <div class="oneCk">
          {{getDictLabel('orderStatus',dataForm.orderStatus)}}
        </div>
      </el-form-item>
      <el-form-item prop="receiveName" label="收货人">
        <div class="oneCk">{{dataForm.receiveName}}</div>
      </el-form-item>
      <el-form-item prop="receivePhone" label="手机号码">
        <div class="oneCk">
          {{dataForm.receivePhone}}
        </div>
      </el-form-item>
      <el-form-item prop="receiveProvince" label="收货地址">
        <div class="oneCk">
          {{dataForm.receiveProvince+dataForm.receiveCity+dataForm.receiveCounty+dataForm.receiveAddress}}
        </div>
      </el-form-item>
      <el-form-item prop="totalPoints" label="支付积分">
        <div class="oneCk">
          {{dataForm.totalPoints}}
        </div>
      </el-form-item>
      <el-form-item prop="trackingNo" label="物流单号">
        <div class="oneCk">
          {{dataForm.trackingNo}}
        </div>
      </el-form-item>
      <el-form-item prop="logisticsType" label="发货模式">
        <div class="oneCk">
          {{getDictLabel('logistics_type',dataForm.logisticsType)}}
        </div>
      </el-form-item>
      <el-form-item prop="expressCompanyName" label="物流公司">
        <div class="oneCk">
          {{dataForm.expressCompanyName}}
        </div>
      </el-form-item>
      <el-form-item prop="trackingNo" label="物流单号">
        <div class="oneCk">
          {{dataForm.trackingNo}}
        </div>
      </el-form-item>
      <el-form-item prop="userId" label="用户ID">
        <div class="oneCk">
          {{dataForm.userId}}
        </div>
      </el-form-item>
      <el-form-item prop="createDate" label="创建时间">
        <div class="oneCk">
          {{dataForm.createDate}}
        </div>
      </el-form-item>

    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <!--      <el-button type="primary" @click="dataFormSubmitHandle()">确认</el-button>-->
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import {formatdate, getDictDataList, getDictLabel} from "@/utils";

export default {
  data() {
    return {
      visible: false,
      url: '',
      dialogImageUrl: '',
      dialogVisible: false,
      imagelist:{},
      expressCompanyList:[],                //所有物流公司信息
      dataForm: {
        id: '',                         //订单id
        productId: '',                  //兑换的商品ID
        userId:'',                      //用户id
        specsId: '',                    //商品规格id
        imgUrl: '',                     //图片
        productName: '',                //被购买商品的名称
        specsDesc: '',                  //规格描述
        createDateStart: '',            //开始创建时间
        createDateEnd: '',              //结束创建时间
        deliveryDateStart:'',           //开始发货时间
        deliveryDateEnd: '',            //结束发货时间
        orderStatus: '',                //订单的当前状态，(1) 待发货；(2) 已发货；
        receiveName: '',                //记录收货人的姓名。
        receivePhone: '',               //记录收货人的手机号码
        receiveProvince: '',            //记录收货地址所在的省、州或自治区
        receiveCity: '',                //记录收货地址所在的城市
        receiveCounty: '',              //记录收货地址所在的区县
        receiveAddress:'',              //记录详细的街道地址，如门牌号、楼层等
        totalPoints: '',                //支付积分
        expressCompany: '',             //物流公司编码，快递公司ID，参见「查询物流公司编码列表」，物流快递发货时必填， 示例值: DHL 字符字节限制: [1, 128]
        trackingNo: '',                 //物流单号，物流快递发货时必填，示例值: 323244567777 字符字节限制: [1, 128]
        logisticsType: '',              //物流模式
      }
    }
  },
  computed: {
    dataRule() {
      return {
      }
    }
  },
  methods: {
    formatdate,
    getDictLabel,
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
          this.userOrderDelivery()
        }
      })
    },
    // 获取信息
    getInfo() {
      this.$http.get(`/api/userPointsOrder/${this.dataForm.id}`).then(({data: res}) => {
        //console.log(res)
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {
      })
    },
    // 获取运力信息
    userOrderDelivery() {
      this.expressCompanyList = getDictDataList('delivery_list')
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        //console.log(this.dataForm)
        if (!valid) {
          return false
        }
      })
    }, 1000, {'leading': true, 'trailing': false}),
  }
}
</script>
<style>
.el-upload el-upload-picture-card {
  display: none;
}
.oneCk{
  width: 300px;
}
/* 栅格布局 */
.flex {
  display: flex !important;
}

.flex_rows {
  display: flex;
  flex-direction: row !important;
}

.flex_row_reverse {
  display: flex;
  flex-direction: row-reverse !important;
}

.flex_columns {
  display: flex;
  flex-direction: column !important;
}

.flex_wrap {
  display: flex;
  flex-wrap: wrap !important;
}

.flex_nowrap {
  display: flex;
  flex-wrap: nowrap !important;
}

.flex_between {
  display: flex;
  justify-content: space-between !important;
}

.flex_around {
  display: flex;
  justify-content: space-around !important;
}

.flex_center {
  display: flex;
  align-items: center !important;
}

.flex_align_start {
  display: flex;
  align-items: flex-start !important;
}

.flex_align_center {
  display: flex;
  align-items: center !important;
}

.flex_align_end {
  display: flex;
  align-items: flex-end !important;
}

.flex_space_around {
  display: flex;
  align-content: space-around !important;
}

.flex_space_between {
  display: flex;
  align-content: space-between !important;
}

.flex_jufy_center {
  display: flex;
  align-items: center;
  justify-content: center !important;
}
</style>
